<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人主页</title>
		<script src="../../javascript/api.js"></script> <!-- api.js必须放到最开头 -->
    <script src="../../javascript/axios.js"></script>
    <script src="../../javascript/vue.js"></script>
		<script src="../jquery.js"></script>
		<script>
			const accessToken = localStorage.token;
		</script>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		[v-cloak] {
		    display: none;
		}
		.title {
		    width: 100%;
		    height: 220px;
		    background: #ddecfb;
		    text-align: center;
		}
		.no_picture_div {
		    width: 75px;
		    background: #85c0f9;
		    height: 75px;
		    text-align: center;
		    line-height: 75px;
		    border-radius: 50%;
		    font-size: 28px;
		    color: #fff;
		    border: solid 1px #FFF;
		    margin: 35px auto 25px auto;
		    display: inline-block;
		}
		.branch_name {
		    font-size: 24px;
		    color: #333333;
		}
		.branch_detail {
    /* margin-top: 12px; */
    height: 270px;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
}
.branch_detail ul {
    margin-top: 35px;
}
.branch_detail li {
    color: #999999;
    font-size: 18px;
    /* text-align: center; */
    /* height: 42px; */
    line-height: 42px;
    text-align: left;
    margin: 0px 0px 0px 130px;
}
li {
    list-style: none;
}
.span_div {
    display: inline-block;
    vertical-align: top;
}
.branch_detail li span {
    margin-left: 20px;
    color: #333333;
    display: inline-block;
    width: 220px;
}
.branch_detail li span b{
	font-weight: normal;
}
.branch_detail li span b input{
	display: inline;
	width: 120px;
}
.branch_detail li span .inline{
	display: inline;
	font-size:12px;
	color: #999;
	cursor: pointer;
}
			::-webkit-scrollbar-track-piece { /*滚动条凹槽的颜色，还可以设置边框属性*/
			background-color:#f8f8f8;
			}
			::-webkit-scrollbar {/*滚动条的宽度*/
			width:9px;
			height:9px;
			}
			::-webkit-scrollbar-thumb {/*滚动条的设置*/
			background-color:#dddddd;
			background-clip:padding-box;
			min-height:28px;
			}
			::-webkit-scrollbar-thumb:hover {
			background-color:#bbb;
			}
			#phoneInput{
				display: none;
			}
			#remarksInput,#phoneTrue,#remarksTrue{
				display: none;
			}
	</style>
	<body>
		<div id="apiCheckBranch" class="apiCheckBranch" v-cloak>
			<div class="title">
				<div class="no_picture_div">
					{{lastName}}
				</div>
				<p class="branch_name"> {{name}}</p>
			</div>
			<div class="branch_detail">
				<ul>
					<li>
						<div class="span_div">
							部门
						</div>
						<span>{{department}}</span>
					</li>
					<li>
						<div class="span_div">
							警号
						</div>
						<span>{{policeNum}}</span>
					</li>
					<li>
						<div class="span_div">
							警种
						</div>
						<span>{{policeCate}}</span>
					</li>
					<li>
						<div class="span_div">
							手机
						</div>
						<span>
							<b id='phoneDisplay'>{{phone}}</b>
							<b id="phoneInput"><input type="text" v-model='phoneChange'></input></b>
							<span class="inline" id="phoneModify" @click='phoneModify'>修改</span>
							<span class="inline" id="phoneTrue" @click='phoneSure'>确定</span>
						</span>
					</li>
					<li>
						<div class="span_div">
								备注
						</div>
						<span>
							<b id="remarksDisplay">{{remarks}}</b>
							<b id="remarksInput"><input type="text" v-model='remarksChange'></input></b>
							<span class="inline" id="remarksModify" @click='remarksModify'>修改</span>
							<span class="inline" id="remarksTrue" @click='remarksSure'>确定</span>
						</span>
					</li>
				</ul>
			</div>
		</div>

		<script>
			const vue = new Vue({
				el: '#apiCheckBranch',
				data: {
					name: '',
					loginId: '',
					lastName: '',
					department:'',
					policeNum: '',      //警号
					policeCate: '',  //警钟
					phone: '',
					phoneChange: '',
					remarks: '',
					remarksChange: '',
					userId: '',
				},
				methods:{
					phoneModify(){
						$('#phoneDisplay').css({'display':'none'});
						$('#phoneInput').css({'display':'inline'});
						$('#phoneModify').css({'display':'none'});
						$('#phoneTrue').css({'display':'inline'});
						this.phoneChange = this.phone;
					},
					phoneSure(){
						//修改手机号
						$('#phoneModify').css({'display':'inline'});
						$('#phoneTrue').css({'display':'none'});
						$('#phoneDisplay').css({'display':'inline'});
						$('#phoneInput').css({'display':'none'});
						const _this = this;
						// axios.post('http://192.168.1.183:8784/uaa/user/currUpdate?access_token='+accessToken,{
						axios.post(zuulHost+'/uaa/user/currUpdate?access_token='+accessToken,{
									"name": this.name,
									"loginId": this.loginId,
									"mobile": this.phoneChange,//手机号码
				        })
				        .then(function(res){
				          console.log(_this.phoneChange);
									var tel = _this.phoneChange; //获取手机号
									var telReg = !!tel.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);
									//如果手机号码不能通过验证
									if(telReg == false){
									  alert('手机格式不正确，请重新输入！')
									}else{
										_this.phone = _this.phoneChange;
									}
				        })
				        .catch(function(err){
				    });
					},
					remarksModify(){
						$('#remarksDisplay').css({'display':'none'});
						$('#remarksInput').css({'display':'inline'});
						$('#remarksModify').css({'display':'none'});
						$('#remarksTrue').css({'display':'inline'});
						this.remarksChange = this.remarks;
					},
					remarksSure(){
						//修改备注
						$('#remarksDisplay').css({'display':'inline'});
						$('#remarksInput').css({'display':'none'});
						$('#remarksModify').css({'display':'inline'});
						$('#remarksTrue').css({'display':'none'});
						const _this = this;
						axios.post(zuulHost+'/uaa/user/currUpdate?access_token='+accessToken,{
									"name": this.name,
									"loginId": this.loginId,
									"lable": this.remarksChange, //备注
				        })
				        .then(function(res){
				          console.log(_this.remarksChange);
									_this.remarks = _this.remarksChange;
				        })
				        .catch(function(err){
				    });
					},
				},
				mounted(){
					//名字例子
					const _this = this;
			    axios.get(zuulHost+'/uaa/user/getCurrentUserInfo?access_token='+accessToken,{
			        })
			        .then(function(res){
			            console.log(res);
							if(res.data.data.name!=''){
								_this.name = res.data.data.name /*全名，全局变量*/
								_this.loginId = res.data.data.loginId;
								_this.userId = res.data.data.userId;
								_this.lastName = res.data.data.name.substr(res.data.data.name.length-1,1); /*最后一个字,全局变量*/

							}
			        })
			        .catch(function(err){
			    });
					console.log('---------------------')
					//获得详细用户信息
					setTimeout(()=>{
						// axios.post('http://192.168.1.183:8784/uaa/organization/getPersionCard/'+_this.userId+'?access_token='+accessToken,{
						axios.post(zuulHost+'/uaa/organization/getPersionCard/'+_this.userId+'?access_token='+accessToken,{
								})
								.then(function(res){
										console.log(res);
								if(res.data.data.name!=''){
									console.log(_this.userId)
									_this.department = res.data.data.data.orgSerialNo; /*部门*/
									_this.policeCate = res.data.data.data.quarters;
									_this.policeNum = res.data.data.data.userNum;
									_this.phone = res.data.data.data.mobile;
									_this.remarks = res.data.data.data.lable;
								}
								})
								.catch(function(err){
						});
					},100)
				},
			});
		</script>
	</body>
</html>
